<template>
  <div>App</div>
  <p>count:{{ person }}</p>
  <button @click="person.age++">按钮</button>
</template>

<script lang="ts">
 import { defineComponent, reactive } from 'vue'
  export default  defineComponent({
    name:'App',
  })
</script>
<script setup lang="ts">
  /* 
     reactive()
        - 返回一个对象的响应式代理
        - 响应式转换是"深层"的：它会影响到所有嵌套的属性
        - reactive只能接受对象类型的数据
  */
 interface PersonType{
  name:string;
  age:number
 }
 const person = reactive<PersonType>({
  name:"xiaowang",
  age:19
 })
 console.log(person)
</script>
<style lang="less" scoped>
  
</style>